<template>
  <div class="qingwu">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <!-- class="admin_main_block_left" -->
        <div>
          <el-form ref="form" :inline="true" :model="form">
            <el-row>
              <el-col :span="8">
                <el-form-item label="分类名称">
                  <el-input v-model="form.name" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分类层级">
                  <el-select v-model="form.id" clearable placeholder="请选择">
                    <el-option
                      v-for="item in projectList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item>
                  <router-link to="/Admin/goods_class/form">
                    <el-button type="primary" icon="el-icon-plus">添加</el-button>
                  </router-link>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    class="mr"
                    @click="handleSearch"
                  >查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- <div>
            <router-link to="/Admin/goods_class/form">
              <el-button type="primary" icon="el-icon-plus">添加</el-button>
            </router-link>
          </div>-->
          <!-- <div><el-input v-model="name" placeholder="请输入内容"></el-input></div>
          <div><el-button icon="el-icon-search">条件筛选</el-button></div>-->
        </div>

        <!-- <div class="admin_main_block_right">
          <div>
            <el-button type="danger" icon="el-icon-delete" @click="del(select_id)">批量删除</el-button>
          </div>
        </div>-->
      </div>
      <div class="admin_table_main">
        <el-table
          :data="list"
          @selection-change="handleSelectionChange"
          row-key="id"
          :tree-props="{children: 'children',hasChildren:'hasChildren'}"
        >
          <!-- <el-table-column type="selection"></el-table-column> -->
          <!-- <el-table-column prop="id" label="#" fixed="left" width="70px"></el-table-column> -->
          <el-table-column label="#" width="70px"></el-table-column>
          <el-table-column label="分类名称">
            <template slot-scope="scope">
              <dl class="table_dl">
                <!-- <dt>
                  <el-image style="width: 50px; height: 50px" :src="scope.row.thumb">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </dt>-->
                <dd class="table_dl_dd_all">{{ scope.row.name }}</dd>
              </dl>
            </template>
          </el-table-column>
          <el-table-column prop="lev" label="分类层级"></el-table-column>
          <el-table-column label="分类图片">
            <template slot-scope="scope">
              <dl class="table_dl">
                <dt>
                  <el-image style="width: 50px; height: 50px" :src="scope.row.thumb">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </dt>
                <!-- <dd class="table_dl_dd_all">{{ scope.row.name }}</dd> -->
              </dl>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="rate" label="分佣">
            <template slot-scope="scope">{{ scope.row.rate }} %</template>
          </el-table-column>-->
          <el-table-column label="当前层级排序">
            <template slot-scope="scope">{{scope.row.is_sort}}/{{scope.row.current_class_num }}</template>
          </el-table-column>
          <el-table-column prop="goods_num" label="商品数"></el-table-column>
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
          <el-table-column label="操作" fixed="right" width="120px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="$router.push({name:'goods_class_form',params:{id:scope.row.id}})"
              >编辑</el-button>
              <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
              <!-- <el-button
                icon="el-icon-edit"
                @click="$router.push({name:'goods_class_form',params:{id:scope.row.id}})"
              >编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      select_id: "",
      form: {
        name: "",
        id: "",
      },
      projectList: [],
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.getSelectList();
  },
  methods: {
    // 获取分类层级
    getSelectList() {
      this.$get(this.$api.searchSelect).then((res) => {
        console.log("reeee", res);
        if (res.code == 200) {
          this.projectList = res.data.goods_class_list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleSelectionChange: function (e) {
      let ids = [];
      e.forEach((v) => {
        ids.push(v.id);
      });
      this.select_id = ids.join(",");
    },
    get_goods_class_list: function () {
      this.$get(this.$api.getGoodsClassList, this.form).then((res) => {
        this.list = res.data;
      });
    },
    // 查询
    handleSearch() {
      this.get_goods_class_list();
    },
    // 删除处理
    del: function (id) {
      if (this.$isEmpty(id)) {
        return this.$message.error("请先选择删除的对象");
      }
      this.$post(this.$api.delGoodsClass, { id: id }).then((res) => {
        if (res.code == 200) {
          this.get_goods_class_list();
          return this.$message.success("删除成功");
        } else {
          return this.$message.error("删除失败");
        }
      });
    },
  },
  created() {
    this.get_goods_class_list();
  },
};
</script>
<style lang="scss" scoped>
.mr {
  margin: 0 20px;
}
</style>